<template>
  <div class="tomato-add-container" v-if="isShow">
    <div class="main">
      <div class="title">新增</div>
      <img
        :src="require('@/assets/images/关闭.png')"
        width="18"
        class="close"
        @click="onCancelClick"
      />

      <el-form
        ref="tomatoFormRef"
        :rules="formRules"
        :model="tomatoInfo"
        label-width="140px"
        style="max-height: 80vh;"
      >
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="编码:">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.code"
                placeholder="编码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称:" prop="name">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.name"
                placeholder="名称"
                @blur="blurName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重量:" prop="weight">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.weight"
                placeholder="重量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="重量拍照:" prop="weightPhoto">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.weightPhoto"
                placeholder="重量拍照"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="装车人:" prop="loadPerson">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.loadPerson"
                :trigger-on-focus="false"
                placeholder="装车人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装车人电话:" prop="loadPhone">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.loadPhone"
                placeholder="装车人电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="拍照时间:" prop="photoTime">
              <el-date-picker
                v-model="tomatoInfo.photoTime"
                size="small"
                style="width: 100%"
                type="datetime"
                placeholder="拍照时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采摘时间:" prop="pickTime">
              <el-date-picker
                v-model="tomatoInfo.pickTime"
                size="small"
                style="width: 100%"
                type="datetime"
                placeholder="采摘时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="装车时间:" prop="loadTime">
              <el-date-picker
                v-model="tomatoInfo.loadTime"
                size="small"
                style="width: 100%"
                type="datetime"
                placeholder="装车时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发车时间:" prop="departTime">
              <el-date-picker
                v-model="tomatoInfo.departTime"
                size="small"
                style="width: 100%"
                type="datetime"
                placeholder="发车时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="大棚:" prop="roomNo">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.roomNo"
                placeholder="大棚"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input
                size="small"
                style="width: 100%"
                v-model.trim="tomatoInfo.remark"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="padding-top: 20px;text-align: center;">
          <el-col :span="24" class="text-c">
            <el-button type="primary" size="small" @click="onSaveClick"
              >确认</el-button
            >
            <el-button type="danger" size="small" @click="onCancelClick"
              >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// import store from "@/store";
export default {
  name: "MainAdd",
  components: {},
  data() {
    return {
      tomatoInfo: {
        id: null,
        code: "",
        name: "",
        weight: "",
        weightPhoto: "",
        loadPerson: "",
        loadPhone: "",
        roomNo: "",
        photoTime: null,
        pickTime: null,
        loadTime: null,
        departTime: null,
        remark: "",
      },
      formRules: {
        // code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        weight: [{ required: true, message: "请输入重量", trigger: "blur" }],
        // weightPhoto: [{ required: true, message: "请输入重量拍照", trigger: "blur" }],
        loadPerson: [{ required: true, message: "请输入装车人", trigger: "blur" }],
        loadPhone: [{ required: true, message: "请输入装车人电话", trigger: "blur" }],
        roomNo: [{ required: true, message: "请输入大棚", trigger: "blur" }],
        photoTime: [{ required: true, message: "请输入拍照时间", trigger: "blur" }],
        pickTime: [{ required: true, message: "请输入采摘时间", trigger: "blur" }],
        loadTime: [{ required: true, message: "请输入装车时间", trigger: "blur" }],
        departTime: [{ required: true, message: "请输入发车时间", trigger: "blur" }],
        // remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
    };
  },
  props: {
    eventType: String,
    isShow: Boolean
  },
  computed: {},
  created() {
    
  },
  methods: {
    close() {
      this.clearFormContent();
      this.$emit("close", null);
    },
    blurName(event) {
      console.log(event);
    },
    /** 确认提交 */
    onSaveClick() {
      let self = this;
      self.$refs.tomatoFormRef.validate(valid => {
        console.log(valid)
        if (valid) {
          let url = "/watch-server/watch-tomato/tomato/saveTomato";
          let params = {
            code: self.tomatoInfo.code,
            name: self.tomatoInfo.name,
            weight: self.tomatoInfo.weight,
            weightPhoto: self.tomatoInfo.weightPhoto,
            loadPerson: self.tomatoInfo.loadPerson,
            loadPhone: self.tomatoInfo.loadPhone,
            roomNo: self.tomatoInfo.roomNo,
            photoTime: self.tomatoInfo.photoTime,
            pickTime: self.tomatoInfo.pickTime,
            loadTime: self.tomatoInfo.loadTime,
            departTime: self.tomatoInfo.departTime,
            remark: self.tomatoInfo.remark,
          }
          self.postAxios(url, params).then(res => {
            if (res.code == 200) {
              self.$refs["tomatoFormRef"].resetFields();
              self.$message.success("保存成功");
              self.clearFormContent();
              let addrs = [];
              self.$emit("close",addrs); // {} 要传的值
            } else {
              self.$message.error(res.message);
            }
          });

        }
      });
    },
    /** 取消提交 */
    onCancelClick() {
      this.$refs["tomatoFormRef"].resetFields();
      this.clearFormContent();
      this.$emit("close", null);
    },
    // 清空表单内容
    clearFormContent() {
      let self = this;
      self.tomatoInfo = {
        id: null,
        code: "",
        name: "",
      };
    },
    regExpResult(rule, str) {
      let reg = new RegExp(rule);
      let result = reg.test(str);
      return result;
    },
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.tomato-add-container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 400;
  display: block;
}
.tomato-add-container .main {
  position: absolute;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: left;
}
.tomato-add-container .main .title {
  padding-bottom: 10px;
}
.tomato-add-container .main  .close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.el-select {
  width: 100%;
}
.el-form-item {
  margin-bottom: 0px;
}
.el-input__inner {
  width: 100%;
}
</style>
